import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView,Image } from '@tarojs/components'
import { AtTabs, AtTabsPane,AtList, AtListItem,AtProgress,AtGrid  } from 'taro-ui'
// import React from 'react';
// import ReactEcharts  from 'echarts-for-react';
import { DNavBar, Dmorinfo, DItemError, DModal,DAtInpute } from '@/components'
import CardealerList  from './CardealerList'
import http from '@/api'
import Chart from 'taro-echarts'
// import common from '@/common'
import './statistics.scss'
import './advanceStatics.scss'
export default class Index extends Component {

  constructor(props) {
    super(props)
    this.state = {
      active: 0,
      isShow: false,
      scrollHeight: window.screen.availHeight,
      id: '',
	  listObj:{
		  mount:[],
		  quantity:[]
	  },
      handle: '',
      currPage: 1,
      totalPage: 1,
      pageSize: 10,
      status: false,
      statisticsData: [
      	{statistics: '本年度代购次数', 'num': 0,img:require('../assets/mortage/nian.png')},
      	{statistics: '本季度代购次数', 'num': 0,img:require('../assets/mortage/ji.png')},
      	{statistics: '本月代购次数', 'num': 0,img:require('../assets/mortage/yue.png')},
      	{statistics: '本周代购次数', 'num': 0,img:require('../assets/mortage/zhou.png')}
      ],
      itemId: ''
    }
  }
  bindCarform(){
	  Taro.navigateTo({
	    url: `/pages/mortgage/vehicleStatistics?pageKey=infor-shoper`
	  })
  }
  getOtion(){
	return  {
	    tooltip: {
	      trigger: 'item'
	    },
		color: [ '#F44557',
				'#FF9F23',
				'#72B3F5',
				'#4BC49D',
				'#FFC331'
				],
	    legend: {
	      top: '5%',
	      left: 'center',
		  // backgroundColor:'#F44557'
	    },

	    series: [
	      {
	        name: 'Access From',
	        type: 'pie',
	        radius: ['40%', '70%'],
	        avoidLabelOverlap: false,
	        label: {
	          show: false,
	          position: 'center'
	        },
	        emphasis: {
	          label: {
	            show: true,
	            fontSize: '40',
	            fontWeight: 'bold'
	          }
	        },
	        labelLine: {
	          show: false
	        },
	        data: [
	          { value: 1048, name: '浦东发展银行' },
	          { value: 735, name: '广发银行' },
	          { value: 580, name: '招商银行' },
	          { value: 484, name: '中国工商银行' },
	          { value: 300, name: '农业银行' }
	        ]
	      }
	    ]
	  }
  }
  componentWillMount() {
    // this.httpMySearchCarList()
    let { active = 0 } = this.$router.params
    this.getData()


    // this.handleClick(+active)
  }
  getData(){
	  console.log("d",http.getInformation)
	  //按揭统计
	  http.getInformation().then((data)=>{
		  console.log("dfd",data)
		   let result = data
	  	   this.state.statisticsData[0].num = result.advanceThisYear || 0
		   this.state.statisticsData[1].num  = result.advanceThisQuarter || 0
		   this.state.statisticsData[2].num  = result.advanceThisMonth || 0
		   this.state.statisticsData[3].num  = result.advanceThisWeek || 0
		   let list = result.merchantStatistics
		   list.mount.map(list=>{
		   			   list.value=list.amountOfAdvanceFunds
		   			   list.name=list.advanceBusinessName
		   })
		   list.quantity.map(list=>{
		   			   list.value=list.numberOfAdvances
		   			   list.name=list.advanceBusinessName
		   })
		   this.state.listObj = list
		   console.log("稍等0",this.state.listObj)
		   this.setState({
			   listObj:this.state.listObj,
			   statisticsData:this.state.statisticsData
		   })
		   })
  }
  componentDidShow() {
    this.setState({
      list: [],
      currPage: 1,
      totalPage: 1,
      status: false
    }, () => {
      // this.httpMySearchCarList()
    })
  }
  //寻车详细
  handleDetail(item) {
    let { active } = this.state
    if (active === 1) {
      return Taro.showToast({
        title: '该寻车已过期',
        icon: 'none'
      })
    }

  }
  //切换tab
  handleClick(active) {
    this.setState({
      list: [],
      currPage: 1,
      totalPage: 1,
      active,
      status: false
    })
  }
  render() {
    const tabList = [{ title: '金额(万元)', }, { title: '数量' }]
    const {
      active,
      listObj,
      isShow,
      handle,
      scrollHeight,
      status
    } = this.state
    return (
      <View className=' b_statistics'>
        <DNavBar title={'垫资统计'}></DNavBar>
        <View className='b_statistics__box'>
          <View className='b_statistics__content'>
             <View className='gridBox  at-row at-row--wrap'>

          			   {this.state.statisticsData.map(item=>(
          			  <View className=" at-col at-col-6  hasBorder"  >
          			    <View className='t-left gridBox_num'>{item.num}</View>
          				<View className="flex-box">
          				   <Image className='gridBox_icon'  src={item.img} />
          					<View className="pad gridBox_text">{item.statistics}</View>
          				</View>
          			  </View>))}
          			  			    </View>
          				  <View className='advanceStatics-listBox' style="width:100%">

          				  <AtList hasBorder={true} >
          				    <AtListItem className='car_title'
          				        title='商家排行前十名'
          				        extraText='查看更多'
          						onClick={this.bindCarform.bind(this)}
          						arrow='right'
          						 hasBorder={false}
          				         />

          						 </AtList>
          					<View className='account-box tabBoxList t-center' >
          					  <AtTabs  tabDirection='horizontal' swipeable={true} current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
          					</AtTabs>
          					</View>

          				   <CardealerList active={0} count={10} list={listObj[active===0?'mount':'quantity']}/>
          				   {/*统计饼图*/}


          				  </View>
          </View>
        </View>
        </View>
    )
  }
}